<template>
  <h2>当前求和为：{{sum}}</h2>
  <button @click="sum++">点我和++</button>
  <hr>
  <h2>个人信息</h2>
  <h2>姓名：{{name}}</h2>
  <h2>年龄：{{age}}</h2>
  <h2>薪资：{{job.j1.salary}}K</h2>
  <h2 v-show="person.car">汽车信息：{{person.car}}</h2>
  <button @click="addCar">添加一辆汽车</button>
  <button @click="person.car.name+='!'">修改汽车名字</button>
  <button @click="person.car.price++">修改汽车价格</button>
  <button @click="name+='~'">修改姓名</button>
  <button @click="age++">增加年龄</button>
  <button @click="job.j1.salary++">涨薪</button>
  <button @click="toRawPerson">输出最原始的person</button>
</template>

<script>
import {reactive, toRefs,ref,toRaw,markRaw} from 'vue'
export default {
  name: "Demo",
  setup(){
    //数据
    let sum=ref(0)
    let person=reactive({
      name:'张三',
      age:18,
      job:{
        j1:{
          salary:20
        }
      }
    })

    function toRawPerson(){
      const p=toRaw(person)
      console.log('p',p)
    }

    function addCar(){
      const car={name:'奔驰',price:40}
      // person.car=car
      person.car=markRaw(car)
    }


    //返回一个对象（常用）
    return{
      sum,
      toRawPerson,
      addCar,
      person,
      ...toRefs(person)
    }
  },
}
</script>

<style scoped>

</style>
